<template>
  <ContentWrap>
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"
             label-width="70px" @submit.native.prevent>
      <el-form-item label="归属学校" prop="schoolId" v-if="tenantId == 1">
        <el-select v-model="queryParams.schoolId" placeholder="请选择" class="!w-240px" filterable
                   default-first-option clearable>
          <el-option v-for="item in schools" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入设备名称" clearable
                  @keyup.enter="handleQuery" class="!w-240px"/>
      </el-form-item>
      <el-form-item label="设备状态" prop="status">
        <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择设备状态">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.YXT_EQUIPMENT_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" v-hasPermi="['yxt:equipment:query']">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button type="primary" plain @click="openForm('create')"
                   v-hasPermi="['yxt:equipment:create']">
          <Icon icon="ep:plus" class="mr-5px"/>
          新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="设备名称" prop="name" width="150"/>
      <el-table-column label="厂商" prop="supplierName" width="100"/>
      <el-table-column label="所属院校" prop="schoolName" min-width="150" show-overflow-tooltip/>
      <el-table-column label="教学楼" prop="buildingName" min-width="120"/>
      <el-table-column label="链接琴房" prop="roomNumber" width="150"/>
      <el-table-column label="设备电量" prop="battery" width="100"/>
      <el-table-column label="设备状态" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.YXT_EQUIPMENT_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="管理员手机号" prop="mobile" min-width="180"/>
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="openForm('update', scope.row.id)"
                     v-hasPermi="['yxt:equipment:update']">
            编辑
          </el-button>
          <el-button link type="danger" @click="handleDelete(scope.row.id)"
                     v-hasPermi="['yxt:equipment:delete']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize" @pagination="getList"/>
  </ContentWrap>
  <EquipmentForm ref="formRef" @success="getList"/>
</template>
<script lang="ts" setup>
import {useConfirm, useMessage} from "@/components/Notice";
import {useEquipmentApi} from "@/api/yxt/supplier";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import EquipmentForm from "@/views/yxt/supplier/equipment/EquipmentForm.vue";
import {useSchoolApi} from "@/api/yxt/school";
import {getTenantId} from "@/utils/auth";

defineOptions({name: 'YxtEquipment'})

const tenantId = getTenantId();

const {t} = useI18n()
const schoolApi = useSchoolApi();

const loading = ref<boolean>(true)
const total = ref<number>(0)
const list = ref<Array<any>>([])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  schoolId: '',
  name: '',
  status: '',
})
const queryFormRef = ref()
const schools = ref<Array<any>>([])

const getList = async () => {
  loading.value = true
  try {
    const data = await useEquipmentApi().getPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id);
}

const handleDelete = (id: number) => {
  useConfirm(t("common.delMessage"), async () => {
    await useEquipmentApi().deleteObj(id)
    getList().finally(() => useMessage(t('common.delSuccess')));
  });
}

onMounted(async () => {
  await getList();
  schools.value = await schoolApi.getSimpleList();
})
</script>
